{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Python元祖</title>
<style>
		html, body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		.div-a{ float:left;width:50%;height:100%;border:1px solid #F00;overflow-y:scroll}
		.div-b{ float:right;width:49%;height:100%;border:0px solid #000}


        div#butt	{
            height:50px;
            border-bottom: 0px solid #c5c5c5;
            background:#fff;
            }

        div#butt input {
            margin:10px 0 0 10px;
            background:blueviolet;
            color:#fff;
            width:150px;
            height:30px;
            font:14px Verdana, Arial, Helvetica, sans-serif;
            }

        form{

            height:45%;
            width:100%;
            margin-left:0px;
			border:0px solid #c5c5c5;
            }
		#CodeArea{
			height:100%;
            width:100%;
            margin-left:0px;
		}
        #TestCode{
            height:85%;
			width:99%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }
        #CodeArea h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

        #result	{
            height:48%;
            width:100%;
			margin-left:0px;
			border:0px solid red;
            }
		#output{
            width:99%;
            height:85%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }

        #result h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

</style>
<script src="{% static "common/jquery-1.8.2.js" %}" type="text/javascript"></script>
</head>
<body>
<div class="div-a">
    <li data-role="list-divider" data-theme="b">Python元祖</li>
  <div id="" class="ui-body ui-body-a">
    <p>Python的元祖（tuple）和列表类似，都是一组有序的序列，区别在于元祖的元素一经确定就不能修改。正因为它的不可变性，所以代码更安全，如果可以，尽量用确定的元祖替代可变的列表。</p><br/>
    <h3>创建元祖</h3>
    <p>
        元祖用小括号表示，因此只需在小括号中添加元素，并用逗号隔开即可。<br/>
示例：<br/>
>>> tup=('a','b','c')<br/>
>>> tup<br/>
('a', 'b', 'c')<br/>
空元祖直接用()表示：<br/>
>>> tup=()<br/>
如果元祖中只有一个元素，元素末尾要加逗号：<br/>
>>> tup=(1,)<br/>
>>> tup<br/>
(1,)<br/>
如果不加逗号，python会把()当成数学运算符号，相当于把该元素复制给变量，而不能被看做一个元祖：<br/>
>>> tup=(1)<br/>
>>> tup<br/>
1<br/>
同列表一样，元祖中的元素也可以是各种类型：<br/>
示例：<br/>
>>> L=[1,2,3]<br/>
>>> tup=('a','c','d',L)<br/>
>>> tup<br/>
('a', 'c', 'd', [1, 2, 3])<br/>
这时，如果我们更改列表L，会得到什么结果呢？<br/>
>>> L.append(4)<br/>
>>> tup<br/>
('a', 'c', 'd', [1, 2, 3, 4])<br/>
看到结果，大家可能会有疑问，不是说元祖是不可更改的嘛，这里怎么变了呢？不要着急，我们仔细地看一下，tup中原来有4个元素，分别是：‘a’，‘c’，‘d’和L，而后L发生了变动，由[1,2,3]变成了[1,2,3,4]，但tup中的4个元素并未发生变化，仍然是‘a’，‘c’，‘d’和L，也就是说，元祖中指向的仍然是列表L而不是其他元素，所以，元祖中的元素其实并未发生变化。
     </p>
    <h3></h3>
    <p>
    <h3></h3>
    <p>
      <h3></h3>
    <p>
     </p>
      <h3></h3>
      <p>

      </p>
  </div>

</div>
<div class="div-b">
	<form action="#" method="post" id="tryitform" name="tryitform" onSubmit="validateForm();" target="i" id="form-a">
		<div id="CodeArea">
		<h2>编辑您的代码：</h2>
		<textarea id="TestCode" wrap="logical">
#!/usr/bin/python
# -*- coding: utf-8 -*-
#------------------------
tup=('a','b','c')
print tup
tup1=(1,)
print tup1

L=[1,2,3]
tup2=('a','c','d',L)
print tup2
L.append(4)
print tup2
#------------------------

#------------------------


		</textarea>
		</div>
		<input type="hidden" id="code" name="code"  />

	</form>
<div id="butt">
		<input type="button" value="提交代码" onClick="submitTryit()" id="submit">
		</div>
	<div id="result">
		<h2>查看结果:</h2>
		<textarea id="output" wrap="logical"></textarea>
	</div>
</div>
<script type="text/javascript">
	function submitTryit()
	{

	    var t=document.getElementById("TestCode").value;

	    document.getElementById("code").value=t;

	    validateForm();
        $.ajax({
         type:"GET",
         url:"/moon/codeHandler",
         data:{"code":t},
         success:function(ret){
            $('#output').html(ret.result)
            }
        })

	}

	function validateForm()
	{
	var code=document.getElementById("code").value;
	if (code.length>5000)
		{
		document.getElementById("code").value="<h1>Error</h1>";
		}
	}
</script>
</body>
</html>
